<template>
  <div class="echarts h-full">
    <ECharts v-if="option" :option="option" id="barCharts" />
  </div>
</template>

<script lang="ts" setup>
import * as echarts from "echarts";
import { useRoute } from "vue-router";
import { isDarkMode } from "@/utils/index";
const routeName = useRoute().name;

const props = defineProps({
  yData: {
    type: Array,
    default: () => [],
  },
  xData: {
    type: Array,
    default: () => [],
  },
  month: {
    type: String,
    default: "",
  },
});
const { yData, xData, month } = toRefs(props);

const option = ref();
onMounted(() => {
  option.value = {
    // backgroundColor: "#00265f",
    animation: true, //控制动画示否开启
    animationDuration: 3000,
    title: {
      text: "",
      x: "center",
      y: "4%",
      subtextStyle: {
        color: "#90979c",
        fontSize: "16",
      },
    },
    tooltip: {
      trigger: "axis",
      backgroundColor: "rgba(0,160,221,0.1)",
      borderColor: "transparent",
      axisPointer: {
        type: "cross",
        label: {
          backgroundColor: "rgba(0,160,221,0.1)",
          color: "rgba(0,244,255,1)",
          fontFamily: "DINPro",
          fontSize: 15,
        },
      },
      textStyle: {
        color: "#fff",
        fontFamily: "DINPro",
        fontSize: 15,
      },
      formatter: (params: any) => {
        var relVal = month.value + "月" + params[0].name + "日";
        for (var i = 0, l = params.length; i < l; i++) {
          relVal +=
            "<br/>" +
            params[i].seriesName +
            " " +
            params[i].marker +
            " " +
            params[i].value;
        }
        return relVal;
      },
    },
    grid: {
      top: "10%",
      right: "1%",
      left: "5%",
      bottom: "12%",
    },
    xAxis: [
      {
        name: "",
        type: "category",
        data: xData.value,
        axisLine: {
          lineStyle: {
            color: "rgba(255,255,255,0.12)",
          },
        },
        axisLabel: {
          color: "#e2e9ff",
          fontSize: 15,
          fontFamily: "DINLight",
        },
        // axisLabel: {
        //   formatter: '日期：{value}'
        // }
        axisTick: {
          //坐标轴刻度颜色  x和y不交叉
          show: false,
        },
      },
    ],
    yAxis: [
      {
        name: "",
        axisLabel: {
          formatter: "{value}",
          color: "#e2e9ff",
          fontSize: 15,
          fontFamily: "DINLight",
        },
        axisLine: {
          show: false,
          lineStyle: {
            color: "rgba(255,255,255,1)",
          },
        },
        splitLine: {
          lineStyle: {
            color: "rgba(255,255,255,0.12)",
            type: "dashed",
          },
        },
      },
    ],
    series: [
      {
        name: "生产数量",
        type: "bar",
        data: yData.value,
        barWidth: "12px",
        itemStyle: {
          color: new echarts.graphic.LinearGradient(
            0,
            0,
            0,
            1,
            [
              {
                offset: 0,
                color: "rgba(0,244,255,1)", // 0% 处的颜色
              },
              {
                offset: 1,
                color: "rgba(0,77,167,1)", // 100% 处的颜色
              },
            ],
            false
          ),
          borderRadius: [0, 0, 0, 0],
          shadowColor: "rgba(0,160,221,1)",
          shadowBlur: 0,
        },
      },
    ],
  };
});
</script>

<style lang="scss" scoped>
.echarts {
  width: 100%;
  height: calc(100% - 45px);
  border-radius: 6px;
  box-shadow: 0 0 12px rgba(0, 0, 0, 0.04);
  padding: 15px;
}
</style>
